<template>
	<view class="cusPayDetail">
		<view class="cusPayDetail_top">
			<view class="top">
				<view> 客户姓名:{{ cname}} </view>
				<view class="btn" @tap="skip(`/pages/financial/addCollection?cid=${cid}&cname=${cname}`)">
					录入收款
				</view>

			</view>
			<view class="header">
				<view> 上年度余额:{{lastYearBalance?lastYearBalance:'0'}} </view>
				<view> 应收款: {{orderAmt?orderAmt:'0'}}</view>
			</view>
		</view>

		<view class="form">
			<view class="form_box">
				<MyTable :cid="cid" :type='type' :data="list" />
			</view>
		</view>
	</view>
</template>

<script>
	import MyTable from "../../components/cusTable.vue";
	export default {
		data() {
			return {
				list: [],
				lastYearBalance: "",
				orderAmt: '',
				cid: "",
				sid: "",
				cname: "",
				type: ''
			};
		},
		components: {
			MyTable,
		},
		methods: {
			getList(query) {
				this.$api
					.InorderReportDetailApi({
						data: query
					})
					.then((res) => {
						if ((res.code = 200)) {
							// console.log(res);
							this.list = res.result.list;
							this.lastYearBalance = res.result.lastYearBalance
							this.orderAmt = res.result.orderAmt
						}
					});
			},
		},
		onLoad(option) {
			// console.log(option);
			this.cid = option.cid
			this.sid = option.sid
			this.type = option.type
			this.cname = option.cname
			// this.getList({
			// 	cid: option.cid
			// });
		},
		onShow() {
			if (this.type == '0') {
				this.getList({
					cid: this.cid
				});
			} else {
				this.getList({
					sid: this.sid
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		// padding: 20rpx;
		background: #f1f1f1;
	}

	.cusPayDetail {

		// padding: 20rpx;
		.cusPayDetail_top {
			background: #fff;

			.top {
				display: flex;
				justify-content: space-around;
				align-items: center;

				view {
					background: #fff;
					// width: 200rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}

				.btn {
					color: #fff;
					// width: 145rpx;
					height: 75rpx;
					line-height: 75rpx;
					background: #fe3430;
					border-radius: 19rpx;
					text-align: center;
					padding: 0 20rpx;
				}
			}

			.header {
				display: flex;
				text-align: center;
				justify-content: space-around;
				align-items: center;

				view {
					background: #fff;
					// width: 200rpx;
					height: 100rpx;
				}
			}
		}

		.form {
			padding: 20rpx;

			.form_box {
				padding: 20rpx;
				margin-top: 20rpx;
				background: #fff;
				border-radius: 20rpx;
			}
		}
	}
</style>
